<template>
  <div style="width:100%;height:400px;"
       id="carAreaPie"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'carAreaPie',
  props: {
    dataSource: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    dataSource(curVal, oldVal) {
      this.$nextTick(() => {
        this.initEchats()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchats()
    })
  },
  methods: {
    initEchats() {
      var carAreaChart = echarts.init(document.getElementById('carAreaPie'))
      var lengendData = []
      var seriesData = []
      for (let i = 0; i < this.dataSource.length; i++) {
        let dataItem = this.dataSource[i]
        lengendData.push(dataItem.cityName)
        seriesData.push({ value: dataItem.carsCount, name: dataItem.cityName })
      }
      let option = {
        color: [
          '#5867dd',
          '#1dc9b7',
          '#2786fb',
          '#ffb822',
          '#fd27eb',
          '#6610f2',
          '#6f42c1',
          '#e83e8c',
          '#dc3545',
          '#fd7e14',
          '#ffc107',
          '#28a745',
          '#20c997',
          '#17a2b8',
          '#e1e1ef',
          '#007bff'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data: lengendData
        },
        series: [
          {
            name: '车辆分布',
            type: 'pie',
            // radius: ["50%", "70%"],
            // avoidLabelOverlap: false,
            // label: {
            //   normal: {
            //     show: false,
            //     position: "center"
            //   },
            //   emphasis: {
            //     show: true,
            //     textStyle: {
            //       fontSize: "30",
            //       fontWeight: "bold"
            //     }
            //   }
            // },
            // labelLine: {
            //   normal: {
            //     show: true
            //   }
            // },
            data: seriesData
          }
        ]
      }

      carAreaChart.setOption(option)
      window.addEventListener('resize', function() {
        carAreaChart.resize()
      })
    }
  }
}
</script>
